import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, TreeSelect } from 'antd';
import { FirstHeaderC, SecondHeaderC, PrimaryC } from '../../comps';
import { TreeSelectC } from '../../comps/form';
import uuid from 'es6-uuid';
const { SHOW_CHILD } = TreeSelect;
class TreeSelectCDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      ds1: [
        {
          children: [
            {
              id: uuid(10),
              title: '1-1',
              value: '1-1',
              children: [
                { id: uuid(10), title: '1-1-1', value: '1-1-1' },
                { id: uuid(10), title: '1-1-2', value: '1-1-2' },
              ],
            },
            { id: uuid(10), title: '1-2', value: '1-2' },
            { id: uuid(10), title: '1-3', value: '1-3' },
            { id: uuid(10), title: '1-4', value: '1-4' },
            { id: uuid(10), title: '1-5', value: '1-5' },
            { id: uuid(10), title: '1-6', value: '1-6' },
          ],
          id: uuid(10),
          title: '1',
          value: '1',
        },
        {
          children: [
            { id: uuid(10), title: '2-1', value: '2-1' },
            { id: uuid(10), title: '2-2', value: '2-2' },
            { id: uuid(10), title: '2-3', value: '2-3' },
            { id: uuid(10), title: '2-4', value: '2-4' },
            { id: uuid(10), title: '2-5', value: '2-5' },
            { id: uuid(10), title: '2-6', value: '2-6' },
          ],
          id: uuid(10),
          title: '2',
          value: '2',
        },
        {
          children: [
            { id: uuid(10), title: '3-1', value: '3-1' },
            { id: uuid(10), title: '3-2', value: '3-2' },
            { id: uuid(10), title: '3-3', value: '3-3' },
            { id: uuid(10), title: '3-4', value: '3-4' },
            { id: uuid(10), title: '3-5', value: '3-5' },
            { id: uuid(10), title: '3-6', value: '3-6' },
          ],
          id: uuid(10),
          title: '3',
          value: '3',
        },
      ],
      ds2: [],
      ds3: [],
      ds4: [],
    };
  }

  change = () => {
    this.TreeSelectC.setSelect('2');
  };
  change1 = () => {
    let ds = [
      {
        children: [
          { id: uuid(10), title: '4-1', value: '4-1' },
          { id: uuid(10), title: '4-2', value: '4-2' },
          { id: uuid(10), title: '4-3', value: '4-3' },
          { id: uuid(10), title: '4-4', value: '4-4' },
          { id: uuid(10), title: '4-5', value: '4-5' },
          { id: uuid(10), title: '4-6', value: '4-6' },
        ],
        id: uuid(10),
        title: '4',
        value: '4',
      },
    ];
    this.setState({
      ds2: ds,
    });
    this.TreeSelectC1.setSelect(['4']);
  };

  onSearch = (e) => {
    setTimeout(() => {
      let ds = [];
      for (let i = 0; i < 10; i++) {
        ds.push({ title: e + i, value: i.toString() });
      }
      this.setState({
        ds3: ds,
      });
    }, 500);
  };

  onSearch1 = (e) => {
    setTimeout(() => {
      let ds = [];
      for (let i = 0; i < 10; i++) {
        ds.push({ title: e + i, value: i.toString() });
      }
      this.setState({
        ds4: ds,
      });
    }, 500);
  };
  render() {
    const { ds1, ds2, ds3, ds4 } = this.state;

    return (
      <Row style={{ padding: '20px' }}>
        <FirstHeaderC title='树形下拉组件-单选' />
        <Col span={6}>
          <SecondHeaderC title='基本场景' />
          <TreeSelectC
            form={this.props.form} // form对象
            title='树形下拉' // 显示名称
            dataIndex='treeselect1' // Form识别的Item ID
            dataSource={ds1}
            onChange={(e) => console.log(e)}
            allowClear={true}
          />
        </Col>
        <Col span={6}>
          <SecondHeaderC title='有初始化值' />
          <TreeSelectC
            form={this.props.form} // form对象
            title='树形下拉' // 显示名称
            dataIndex='treeselect2' // Form识别的Item ID
            dataSource={ds1}
            initialValue='1'
            onChange={(e) => console.log(e)}
            allowClear={true}
          />
        </Col>
        <Col span={6}>
          <SecondHeaderC title='异步加载' />
          <TreeSelectC
            form={this.props.form} // form对象
            title='树形下拉' // 显示名称
            dataIndex='treeselect3' // Form识别的Item ID
            dataSource={ds1}
            onChange={(e) => console.log(e)}
            allowClear={true}
            initialValue='1'
            onRef={(ref) => (this.TreeSelectC = ref)}
          />
          <PrimaryC title='点击更改' onClick={() => this.change()} />
        </Col>
        <Col span={6}>
          <SecondHeaderC title='模拟搜索，从后端获取数据' />
          <TreeSelectC
            form={this.props.form} // form对象
            title='树形下拉' // 显示名称
            dataIndex='treeselect4' // Form识别的Item ID
            dataSource={ds3}
            onChange={(e) => console.log(e)}
            allowClear={true}
            showSearch={true}
            onSearch={this.onSearch}
          />
        </Col>
        <Col span={6}>
          <SecondHeaderC title='前端自搜索' />
          <TreeSelectC
            form={this.props.form} // form对象
            title='树形下拉' // 显示名称
            dataIndex='treeselect5' // Form识别的Item ID
            dataSource={ds1}
            onChange={(e) => console.log(e)}
            allowClear={true}
            showSearch={true}
            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
          />
        </Col>
        <FirstHeaderC title='树形下拉组件-多选' />
        <Col span={6}>
          <SecondHeaderC title='基本场景' />
          <TreeSelectC
            form={this.props.form} // form对象
            title='树形下拉' // 显示名称
            dataIndex='treeselect6' // Form识别的Item ID
            dataSource={ds1}
            onChange={(e) => console.log(e)}
            allowClear={true}
            isMultiple={true}
            treeCheckable={true}
            treeDefaultExpandAll={true}
          />
        </Col>
        <Col span={6}>
          <SecondHeaderC title='有初始化值' />
          <TreeSelectC
            form={this.props.form} // form对象
            title='树形下拉' // 显示名称
            dataIndex='treeselect7' // Form识别的Item ID
            dataSource={ds1}
            onChange={(e) => console.log(e)}
            isMultiple={true}
            allowClear={true}
            treeCheckable={true}
            initialValue='1'
            treeDefaultExpandAll={true}
          />
        </Col>
        <Col span={6}>
          <SecondHeaderC title='异步加载' />
          <TreeSelectC
            form={this.props.form} // form对象
            title='树形下拉' // 显示名称
            dataIndex='treeselect8' // Form识别的Item ID
            dataSource={ds2.length > 0 ? ds2 : ds1}
            onChange={(e) => console.log(e)}
            isMultiple={true}
            allowClear={true}
            showSearch={false}
            treeCheckable={true}
            treeDefaultExpandAll={true}
            showCheckedStrategy={SHOW_CHILD}
            onRef={(ref) => (this.TreeSelectC1 = ref)}
          />
          <PrimaryC title='点击更改' onClick={this.change1} />
        </Col>
        <Col span={6}>
          <SecondHeaderC title='模拟搜索，从后端获取数据' />
          <TreeSelectC
            form={this.props.form} // form对象
            title='树形下拉' // 显示名称
            dataIndex='treeselect9' // Form识别的Item ID
            dataSource={ds4}
            onChange={(e) => console.log(e)}
            isMultiple={true}
            allowClear={true}
            treeCheckable={true}
            showSearch={true}
            treeDefaultExpandAll={true}
            onSearch={this.onSearch1}
          />
        </Col>
      </Row>
    );
  }
}

export default Form.create()(TreeSelectCDemo);
